<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报名页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            background-color: #f4f4f4;
            background-image: url('/bg.jpg'); /* 背景图片路径 */
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h1 {
            color: #007bff;
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            box-sizing: border-box;
        }

        p.declaration {
            color: red;
            font-size: 14px;
            text-align: center;
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        input[type="text"], input[type="file"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            box-sizing: border-box;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .error {
            color: red;
            margin-bottom: 12px;
        }

        .success {
            color: green;
            margin-bottom: 12px;
        }
    </style>
</head>
<body>

<form id="registrationForm" onsubmit="return submitForm(event)">
    <p class="declaration">请不要上传敏感信息，如有问题概不负责</p>

    <h1>欢迎报考国科大杭高院</h1>
    <div class="error" id="errorMessage"></div>
    <div class="success" id="successMessage"></div>

    <label for="qq">准考证号:</label>
    <input type="text" id="qq" name="qq" placeholder="请输入准考证号">

    <label for="image">成绩单截图:</label>
    <input type="file" id="image" name="image" accept="image/*">

    <button type="submit" id="submitButton">提交成绩单</button>
</form>

<script>
    // 页面加载时弹出提示信息
    window.onload = function() {
        alert("本系统仅用于技术交流，仅面向杭高院智能学院的AI与CS专业(但无法区分物光学院和分子医学院的AI专业)，仅用于帮助考生了解分数排名情况，不搜集个人信息，强烈建议将个人敏感信息（姓名，身份证号码），数据库亦不存储敏感信息，特此声明！（需要成绩单截图中的准考证号，报考单位，报考专业，总分，英语（二），思想政治理论，数学（二），计算机学科专业基础等信息），此版本不显示实时排名，当录分人数出现明显收敛时将开通查询排名功能，具体通知请参考报名群");
    };

    async function submitForm(event) {
        event.preventDefault();

        const qq = document.getElementById('qq').value;
        const image = document.getElementById('image').files[0];
        const errorMessage = document.getElementById('errorMessage');
        const successMessage = document.getElementById('successMessage');
        const submitButton = document.getElementById('submitButton');

        errorMessage.innerHTML = '';
        successMessage.innerHTML = '';

        // 表单验证
        const qqRegex = /^(14430521600\d{4}|14430421600\d{4})$/;


        if (qq === '') {
            errorMessage.innerHTML = '准考证号不能为空';
            return;
        }

        if (!qqRegex.test(qq)) {
            errorMessage.innerHTML = '准考证号不正确';
            return;
        }

        if (!image) {
            errorMessage.innerHTML = '成绩单截图不能为空';
            return;
        }

        // 禁用提交按钮并修改样式
        submitButton.disabled = true;
        submitButton.style.backgroundColor = '#ccc';

        // 准备 FormData 对象
        const formData = new FormData();
        formData.append('qq', qq);
        formData.append('image', image);

        try {
            const response = await fetch('/ocr', {
                method: 'POST',
                body: formData
            });

            if (response.ok) {
                const result = await response.text();
                alert(result); // 弹出提交成功提示
                successMessage.innerHTML = result;
                window.location.reload();
            } else {
                errorMessage.innerHTML = '提交失败，请重试。';
            }
        } catch (error) {
            errorMessage.innerHTML = '请求出现错误，请稍后重试。';
        } finally {
            // 恢复按钮状态
            submitButton.disabled = false;
            submitButton.style.backgroundColor = '#28a745';
        }
    }
</script>

</body>
</html>
